<template>
  <a-modal @cancel="resetModalData()" :footer="null" v-model:visible="addVisible" title="新增管理员">
    <a-form
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
    >
      <a-form-item name="username" label="用户名" v-bind="validateInfos.username">
        <a-input type="text" v-model:value="modelRef.username"/>
      </a-form-item>
      <a-form-item name="password" label="密码" v-bind="validateInfos.password">
        <a-input type="password" v-model:value="modelRef.password"/>
      </a-form-item>
      <a-form-item name="gender" label="等级" v-bind="validateInfos.permission">
        <a-select v-model:value="modelRef.permission">
          <a-select-option :value="1">1级</a-select-option>
          <a-select-option :value="2">2级</a-select-option>
          <a-select-option :value="3">3级</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-space :size="20">
          <a-button type="normal" @click="resetModalData()">关闭</a-button>
          <a-button type="primary" @click="onSubmit">添加</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {ref, toRaw} from "vue";
import {modelRef, rulesRef} from "@/views/Admin/Main/AddForm/config";
import {useForm} from "ant-design-vue/es/form";
import {adminStore} from "@/views/Admin/Main/config";
import {IModelRef} from "@/views/Admin/Main/AddForm/types";
import {message} from "ant-design-vue";

const addVisible = ref(false)

const {resetFields, validate, validateInfos} = useForm(modelRef, rulesRef);

// 显示隐藏
const handleAddUserModal = (flag: boolean) => {
  addVisible.value = flag
}
const resetModalData = () => {
  addVisible.value = false
  resetFields()
}
const onSubmit = () => {
  validate()
      .then(async () => {
        const params: IModelRef = toRaw(modelRef)
        const flag = await adminStore.addAdminAction(params)
        if (flag) {
          resetModalData()
        }
      })
      .catch(err => {
        const defaultInfo = err.errorFields[0].errors[0]
        message.error(defaultInfo)
      });
};
defineExpose({
  handleAddUserModal
})
</script>

<style lang="less" scoped></style>
